<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Raphaël · Pie Chart</title>
       <!-- <link rel="stylesheet" href="demo.css" media="screen">
        <link rel="stylesheet" href="demo-print.css" media="print">
        <script src="../js/raphael-min.js"></script>
        <script src="../js/jquery-1.9.1.min.js"></script>
        <script src="pie.js"></script>
        <style media="screen">
            #holder {
                margin: -350px 0 0 -350px;
                width: 700px;
                height: 700px;
            }
        </style>-->
    </head>
    <body>
    <div id="holder">
        <svg height="700" version="1.1" width="700" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: 0.5px;">
            <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
            <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                <linearGradient id="090-_ff0000-_ff3f3f" x1="0" y1="1" x2="6.123031769111886e-17" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                    <stop offset="0%" stop-color="#ff0000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
                    <stop offset="100%" stop-color="#ff3f3f" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
                </linearGradient>
                <linearGradient id="290-_ff9900-_ffb23f" x1="0" y1="1" x2="6.123031769111886e-17" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                    <stop offset="0%" stop-color="#ff9900" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
                    <stop offset="100%" stop-color="#ffb23f" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
                </linearGradient>
                <linearGradient id="490-_ccff00-_d8ff3f" x1="0" y1="1" x2="6.123031769111886e-17" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                    <stop offset="0%" stop-color="#ccff00" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
                    <stop offset="100%" stop-color="#d8ff3f" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
                </linearGradient>
            </defs>
            <path fill="url(#090-_ff0000-_ff3f3f)" stroke="#ffffff" d="M333,222L444,222A111,111,0,0,0,222,222Z" opacity="1" fill-opacity="1" stroke-width="0" transform="rotate(90 350 350)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;"></path>
            <text x="333" y="56" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ff0000" opacity="0" font-size="20px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 20px; line-height: normal; font-family: Arial; opacity: 0;">
                <tspan dy="7.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Ruby</tspan>
            </text>
            <path fill="url(#290-_ff9900-_ffb23f)" stroke="#ffffff" d="M333,222L222,222A111,111,0,0,0,267.75583699553545,311.80088637561914Z" opacity="1" fill-opacity="1" stroke-width="0" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;"></path>
            <text x="158.3627212590799" y="297.36242295676476" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ff9900" opacity="0" font-size="20px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 20px; line-height: normal; font-family: Arial; opacity: 0;">
                <tspan dy="7.49523545676476" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">JavaScript</tspan>
            </text>
            <path fill="url(#490-_ccff00-_d8ff3f)" stroke="#ffffff" d="M333,222L267.75583699553545,311.80088637561914A111,111,0,0,0,444,222.00000000000003Z" opacity="1" fill-opacity="1" stroke-width="0" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;"></path>
            <text x="421.98213794895116" y="369.9070830152691" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ccff00" opacity="0" font-size="20px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 20px; line-height: normal; font-family: Arial; opacity: 0;">
                <tspan dy="7.493020515269109" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Shell</tspan>
            </text>
        </svg>
    </div>
    </body>
</html>
